<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* rem是相对于html的    */
        /* 把html的字体大小设置成动态的 */
        /* html {
            font-size: 1vw;
        }
        .a {
            font-size: 3rem;
        } */


        html {
            /* 100vw 浏览器的大小 */
            /* 1rem = 1px  */

            /* 把屏幕大小等分750份   28px就是占28份 */
            /* font-size: 100vw / 750; */
            font-size: 0.13333vw;
        }

        .a {
            font-size: 28rem;
        }
    </style>
</head>

<body>


    <!-- 
        移动端适配的结果
            浏览器宽度正好是 750px的时候   浏览器和设计图是1:1
            浏览器宽度大于750px的时候     整个内容就等比例放大
            浏览器宽度小于750px的时候     整个内容就等比例缩小

        字体大小   px
     -->

    <div class="a">哈哈</div>

</body>

</html>